<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import arrowLeft from '/images/webp/affiliate-program/arrow-left.webp'

const router = useRouter()
const route = useRoute()
const { t } = useI18n()

function navigateBack() {
  console.log('navigateBack')
  router.back()
}

// 处理标题显示
const displayTitle = computed(() => {
  // 如果meta.title存在且不是以'/'开头(不是路径)，则尝试翻译
  if (route.meta.title && typeof route.meta.title === 'string' && !route.meta.title.startsWith('/')) {
    return t(route.meta.title)
  }
  // 否则返回原始title或默认值
  return route.meta.title || '联盟计划'
})
</script>

<template>
  <!-- 顶部导航 -->
  <div class="header">
    <div class="back-btn" @click="navigateBack">
      <BaseImage width="6px" :url="arrowLeft" />
    </div>
    <div class="title">
      {{ displayTitle }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  background-color: #323738;
  height: 48px;
  display: flex;
  align-items: center;
  position: relative;

  .back-btn {
    position: absolute;
    left: 15px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b3bec1;
    font-size: 14px;
    background-color: #4a5354;
    border-radius: 4px;
    cursor: pointer;
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
